<template>
	<view class="container container17782">
		<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex-clz">
			<image src="/static/tx-nxs4.png" class="diygw-image diygw-col-0 image-clz" style="height: 80px !important; width: 80px" mode="widthFix"></image>
		</view>
		<form @submit="submitForm" class="flex diygw-form flex-direction-column diygw-col-24">
			<view class="diygw-form-item diygw-col-24 usename-clz radius flex-direction-column">
				<view class="input">
					<input class="flex1" :focus="usenameFocus" name="usename" comfirm-type="done" type="text" v-model="usename" placeholder="用户名/电话" />
				</view>
			</view>
			<view class="diygw-form-item diygw-col-24 password-clz radius flex-direction-column">
				<view class="input">
					<input class="flex1" :focus="passwordFocus" name="password" comfirm-type="done" type="password" v-model="password" placeholder="密码" />
				</view>
			</view>
			<view class="flex diygw-col-24 flex-direction-column justify-center button-clz radius">
				<button class="diygw-btn black radius button-button-clz"  @click="login()">登录</button>
			</view>
		</form>
		<view class="flex flex-wrap diygw-col-24 justify-center items-center flex3-clz">
			<text class="flex icon diygw-col-0 icon-clz diy-icon-weixin"></text>
			<text class="flex icon1 diygw-col-0 icon1-clz diy-icon-weibo"></text>
			<text class="flex icon2 diygw-col-0 icon2-clz diy-icon-github"></text>
		</view>
		<view class="flex flex-wrap diygw-col-24 justify-center items-center flex1-clz">
			<view class="diygw-col-0 diygw-text-md"> 忘记密码 </view>
			<view class="diygw-col-0 text3-clz diygw-text-md"> | </view>
			<view class="diygw-col-0 diygw-text-md"> 短信登录 </view>
		</view>
		<view class="version text-grey flex-direction-column flex diygw-col-24 justify-center align-center">
			<view> DIY官网代码生成器生成 </view>
			<view> http://www.diygw.com </view>
		</view>
		<view class="clearfix"></view>
	</view>
</template>

<script>
import { showToast } from '../common/Page';
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				usenameFocus: false,
				usename: '',
				passwordFocus: false,
				password: ''
			};
		},
		onShow() {
			
		},
		onLoad(option) {
			
		},
		methods: {
			login(){
                uni.request({
                    url:'http://127.0.0.1:8080/api/User/login',
                    method:'POST',
                    data:{
                        account:this.usename,
                        password:this.password
                    }
                }).then((res)=>{
                    console.log(res)
    
                    if(res.data.code===1){
                        uni.navigateTo({
                            url:'/pages/vip'
                        })
                    }
                    
                    uni.showToast({
                        icon:'success',
                        title:res.data.msg
                      })      
                })
            }
		}
	};
</script>

<style lang="scss" scoped>
	.flex-clz {
		z-index: 100;
		height: 180px;
	}
	.image-clz {
		border-bottom-left-radius: 50%;
		box-shadow: 0px 0px 30px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		border-bottom-right-radius: 50%;
	}
	.usename-clz {
		margin-left: 20px;
		box-shadow: 0px 0px 30px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 20px - 20px) !important;
		font-size: 16px !important;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 20px;
	}
	.password-clz {
		margin-left: 20px;
		box-shadow: 0px 0px 30px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 20px - 20px) !important;
		font-size: 16px !important;
		margin-top: 20px;
		margin-bottom: 10px;
		margin-right: 20px;
	}
	.button-clz {
		margin-left: 20px;
		box-shadow: 0px 0px 30px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(100% - 20px - 20px) !important;
		font-size: 16px !important;
		margin-top: 20px;
		margin-bottom: 10px;
		margin-right: 20px;
	}
	.button-button-clz {
		font-size: 17px !important;
		margin: 0px !important;
		padding: 24px !important;
	}
	.flex3-clz {
		margin-left: 5px;
		z-index: 100;
		color: rgba(0, 0, 0, 0.71);
		width: calc(100% - 5px - 5px) !important;
		margin-top: 55px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.icon-clz {
		margin-left: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 10px;
	}
	.icon {
		font-size: 32px;
	}
	.icon1-clz {
		margin-left: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 10px;
	}
	.icon1 {
		font-size: 32px;
	}
	.icon2-clz {
		margin-left: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
		margin-right: 10px;
	}
	.icon2 {
		font-size: 32px;
	}
	.flex1-clz {
		margin-left: 5px;
		z-index: 100;
		color: rgba(0, 0, 0, 0.71);
		width: calc(100% - 5px - 5px) !important;
		margin-top: 15px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.text3-clz {
		margin-left: 5px;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-right: 5px;
	}
	.container17782 {
		padding-left: 0px;
		padding-right: 0px;

		font-size: 12px;
	}
</style>
